﻿<link href="~/lib/layui/css/layui.css" rel="stylesheet" />   @* 一 ①样式 *@ @* ②layui js库 *@
<script src="~/js/js.cookie.js"></script>
<script src="~/js/moment.js"></script>
<script src="~/lib/layui/layui.js"></script>
<script src="~/lib/jquery/dist/jquery.js"></script>

<h2> 修改商品 </h2>

<table class="layui-table">
    <tr>
        <td>商品名称</td>
        <td> <input type="text" id="name" value="" /> </td>
    </tr>
    <tr>
        <td>商品图片</td>
        <td>

            <input type="text" id="imgUrl" hidden />

            <div class="layui-upload">
                <button type="button" class="layui-btn" id="ID-upload-demo-btn-2">
                    <i class="layui-icon layui-icon-upload"></i> 多图片上传
                </button>
                <blockquote class="layui-elem-quote layui-quote-nm" style="margin-top: 11px;">
                    预览图：
                    <div class="layui-upload-list" id="upload-demo-preview"></div>
                </blockquote>
            </div>
            
        </td>
    </tr>
    <tr>
        <td>商品描述</td>
        <td>    <textarea id="description"></textarea>   </td>
    </tr>
    <tr>
        <td>商品价格</td>
        <td> <input type="text" id="price" value="" /> </td>
    </tr>
    <tr>
        <td>商品库存</td>
        <td> <input type="text" id="stock" value="" /> </td>
    </tr>
    <tr>
        <td>状态</td>
        <td>
            <select id="status">
                <option value="0">请选择</option>
                <option value="1">上架</option>
                <option value="2">下架</option>
            </select>

        </td>
    </tr>
    <tr>
        <td></td>
        <td> <input type="button" id="btnok" value="修改商品" onclick="EditProduct()" /> </td>
    </tr>
</table>


<script>
    //就绪函数
    $(function () {
        TPSC();
        FanTianProduct();
      
    });
    //全局变量
    var id = 0;
    function FanTianProduct() { 
       
        id = localStorage["id"];
        $.ajax({
            url: 'https://localhost:7061/api/Product/GetProductById?id='+id,
            type:'get',
            success: function (res) { 
                $("#name").val(res.name);
                $("#description").val(res.description);
                $("#price").val(res.price);
                $("#stock").val(res.stock);
                // $("#status").val(res.status);

                //反填图片
                $('#upload-demo-preview').html('<img src="' + res.imgUrl + '" alt="' + res.name + '" style="width: 90px; height: 90px;">')
            }
        });
        
    }

    function TPSC() {
        var upload = layui.upload;
        var layer = layui.layer;
        var element = layui.element;
        var $ = layui.$;
        // 多图片上传
        upload.render({
            elem: '#ID-upload-demo-btn-2',
            url: '/home/TPSP', // 实际使用时改成您自己的上传接口即可。
            multiple: true,
            before: function (obj) {
                // 预读本地文件示例，不支持ie8
                obj.preview(function (index, file, result) {
                    $('#upload-demo-preview').html('<img src="' + result + '" alt="' + file.name + '" style="width: 90px; height: 90px;">')
                });
            },
            done: function (res) {
                // 上传完毕
                // …

                $("#imgUrl").val(res.imgUrl);
            }
        });
    }

    function EditProduct() { 
        var name = $("#name").val();
        var imgUrl = $("#imgUrl").val();
        var description = $("#description").val();
        var price= $("#price").val();
        var stock= $("#stock").val();

        var obj = {
            "id": id,
            "code": "",
            "name": name,
            "imgUrl": imgUrl,
            "description": description,
            "price": price,
            "stock": stock,
            "status": 0,
            "createTime": "2024-09-20T04:17:35.870Z",
            "updateTime": "2024-09-20T04:17:35.870Z",
            "isDeleted": true
        };

        $.ajax({
            url: 'https://localhost:7061/api/Product/UpdateProduct',
            type:'put',
            data:JSON.stringify(obj),
            contentType:'application/json',
            success: function (res) {
                if (res > 0) {
                    alert("修改成功!");
                    location.href='/product/list'
                } else {
                    alert("修改失败!");
                }
            }
        });
    }

</script>